<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>finalWork</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <svg id="my_svg"></svg>
    <div id="timeline-container">
        <div id="pie-chart"></div>
        <div id="timeline"></div>
    </div>
    <div id="info-button-container">
        <button id="info-button" class="info-button">详细信息</button>
    </div>
    
    <div id="bar-chart-container" style="display: none;"></div> <!-- 条形图容器 -->
    <div id="pie-chart-container" style="position: relative;">

    </div>
    
    
    <div id="thermometer-container"></div>
    <div id="temperature-display" style="position: absolute; top: 10px; left: 10px; padding: 10px; background-color: black; color: white; font-size: 16px; border-radius: 5px;">
        当前温度: <span id="current-temperature">--</span>°C
      </div>
    <div id="chart-container" class="chart-container" style="display: none;">
        <!-- 拿破仑肖像 -->
        <img src="image/napolun.jpg" class="left-image" alt="Napoleon" />
        <!-- 库图佐夫肖像 -->
        <img src="image/Kutuzov1.jpg" class="right-image" alt="Kutuzov" />
        
        <!-- 图表本身 -->
        <svg id="chart" class="chart" xmlns="http://www.w3.org/2000/svg">
          <text x="50%" y="30" text-anchor="middle" font-size="24" font-weight="bold" fill="#fff">博罗金诺战役对比图</text>
        </svg>
        
        <!-- 兵力和伤亡信息显示框 -->
        <div id="army-info" class="info-box"></div>
        <div id="casualty-info" class="info-box"></div>
    </div> 
      <div id="dibu-button-container">
        <button id="dibu-button" class="dibu-button">决定性战役</button>
    </div>  
    <script type="text/javascript" src="js/d3.min.js"></script>
    <script type="text/javascript" src="js/d3-array.v2.min.js"></script>
    <script type="text/javascript" src="js/d3-hexbin.v0.2.min.js"></script>
    <script type="text/javascript" src="js/my.js"></script>

</body>
</html>